<template>
  <div class="login">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24" class="box">
        <el-card class="card">
          <el-form :model="loginForm" :rules="rules" ref="loginform">
            <h1>Hello</h1>
            <h2>欢迎登录！</h2>
            <el-form-item prop="username">
              <el-input :prefix-icon="User" size="large" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :prefix-icon="Lock" size="large" v-model="loginForm.password" show-password type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="large" :loading="loading" @click="login" class="button">登 录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { User, Lock } from '@element-plus/icons-vue'
  import useUserStore from '@/store/modules/user'
  import { useRouter, useRoute } from 'vue-router'
  import { ElNotification } from 'element-plus'
  import { getTime } from '@/utils/time.ts'

  let UserStore = useUserStore()
  let $router = useRouter()
  let $route = useRoute()
  let loginForm = reactive({
    username: '8282',
    password: ''
  })
  let loginform = ref()
  let loading = ref(false)
  const validatorUserName = (rule: any, value: string, callback: any) => {
    if (value.length >= 2 && value.length <= 10) {
      callback()
    } else {
      callback(new Error('账号长度2-10位'))
    }
  }
  const validatorPassWord = (rule: any, value: string, callback: any) => {
    if (value.length >= 4) {
      callback()
    } else {
      callback(new Error('账号长度至少4位'))
    }
  }
  const rules = {
    username: [{trigger: 'change', validator: validatorUserName}],
    password: [{trigger: 'change', validator: validatorPassWord}]
  }
  const login = async() => {
    await loginform.value.validate()
    loading.value = true
    await UserStore.userLogin(loginForm).then(()=> {
      loading.value = false
      ElNotification({
        type: 'success',
        message: '登录成功',
        title: `hi, ${getTime()}好！`
      })
      let redirect = $route.query.redirect || '/'
      $router.push({ path: redirect as string })
    }).catch(err => {
      loading.value = false
      ElNotification({
        type: 'error',
        message: err,
      })
    })
  }
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/bg.png') no-repeat;
  background-size: cover;
  .box {
    display: flex;
    justify-content: center;
    .card {
      width: 45%;
      margin-top: 30vh;
      color: #333;
      h1, h2 {
        margin-bottom: 1rem;
      }
      .button {
        width: 100%;
        // background-color: variable.$color;
        // color: #fff;
      }
    }
  }
}
</style>

